<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index2</title>
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
</head>
<body>
<div id="app">
    <h1>路由器</h1>
    <p>
        <router-link to="/user/foo">/user/foo</router-link>
        <router-link to="/user/foo/profile">Foo</router-link>
        <router-link to="/user/foo/posts">Bar</router-link>
    </p>
    <router-view></router-view>
</div>
<!--<div id="app">-->
    <!--<p>-->
        <!--<router-link to="/user/foo">/user/foo</router-link>-->
        <!--<router-link to="/user/foo/profile">/user/foo/profile</router-link>-->
        <!--<router-link to="/user/foo/posts">/user/foo/posts</router-link>-->
    <!--</p>-->
    <!--<router-view></router-view>-->
<!--</div>-->
<script>
    const User = {
        template: `
        <div class="user">
        <h2>User {{ $route.params.id }}</h2>
        <router-view></router-view>
        </div>
     `
    };
    const Profile = {template:'<div>profile</div>'};
    const Posts = {template:'<div>posts</div>'};
    const Userhome = {template:'<div>Userhome</div>'};


    const router = new VueRouter({
        routes:[
            {
                path:'/user/:id',
                component:User,
                children:[
                    {path:'profile',component:Profile},
                    {path:'posts',component:Posts},
                    {path:'',component:Userhome}
                ]
            }
        ]
    });
    const app = new Vue({
        router
    }).$mount('#app')
</script>
</body>
</html>